<!DOCTYPE html>
<html>
<% include ./user_component/head.ejs%>
<script src="/js/vue.js"></script>
<style>
    .userImage {
        margin: 0 0 30px 110px;
    }

    .layui-form-item .layui-input-inline {
        width: 580px;
    }

    .add-icon {
        background-image: url('/images/fuhao.jpg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: 1px 2px;
        background-size: 230px 140px;
        width: 40px;
        height: 40px;
        cursor: pointer;
    }

    .delete-icon {
        background-image: url('/images/fuhao.jpg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: -46px 2px;
        background-size: 230px 140px;
        width: 40px;
        height: 40px;
        cursor: pointer;
    }
    .answer-label{
        margin-right: 20px;
    }

    

</style>

<body>
    <div class="x-body" id="page">

            <div class="layui-form-item">
                <label for="questionTitle" class="layui-form-label">
                    题目
                </label>
                <div class="layui-input-inline">
                    <input type="text" v-model="title" id="questionTitle" name="questionTitle" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    将会成为题目
                </div>
            </div>
            <div class="layui-form-item" v-for="(item,i) in options" v-bind:key="item.i">
                <label for="questionTitle" class="layui-form-label">
                    {{item.word}}
                </label>
                <div class="question-list">
                    <div class="layui-input-inline">
                        <input type="text" v-model="item.content" class="layui-input">
                    </div>
                    <div class="layui-word-aux" v-if="i === options.length-1">
                        <img class="delete-icon" @click="deleteOptions" />
                        <img class="add-icon" @click="addOptions" />
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="line-height: 45px;">
                <label for="questionTitle" class="layui-form-label">
                    答案
                </label>
                <div class="layui-input-block">
                    <label class="answer-label" v-for="(item,i) in options" v-bind:key="i">{{item.word}} <input type="radio" name="answer" @click=radioClick(item.word)
                        ></label>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                </label>
                <button class="layui-btn" @click="confirm">
                    增加
                </button>
            </div>

    </div>
    <script>

        var page = new Vue({
            el: '#page',
            data: {
                title: '',
                options: [{ word: 'A', content: '' },{ word: 'B', content: '' }],
                answer: '',
                word: ['A', 'B', 'C', 'D', 'E']
            },
            methods: {
                addOptions() {
                    let num = this.options.length
                    let _this = this;
                    if (num >= 5) {
                        return false
                    }
                    this.options.push({ word: _this.word[num], content: '' })
                    layui.use('form', function () {
                        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
                        form.render();
                    });
                },
                deleteOptions() {
                    this.options.splice(-1, 1)
                    layui.use('form', function () {
                        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
                        form.render();
                    });
                },
                radioClick(answer){
                    this.answer = answer
                },
                confirm() {
                    let data = {}
                    data.title = this.title
                    data.options = this.options
                    data.answer = this.answer
                    data.type = '选择题'
                        $.ajax({
                        url: '/api/addQuestion',
                        method: 'POST',
                        header: {
                            'content-type': 'application/json' // 默认值
                        },
                        data: data,
                        success: function (e) {
                            //发异步，把数据提交给php
                            layer.alert("修改成功", { icon: 6 }, function () {
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                //关闭当前frame
                                if (parent) {
                                    parent.layer.close(index);
                                }
                                parent.history.go(0)
                            });
                        },
                        fail: function (err) {
                            console.log(err);
                        },
                        complete: function (e) {
                        }
                    }
                    )
                }
            }

        })
        layui.use(['form', 'layer'], function () {
            layui.form.on('radio(answer)', function (data) {
                page.answer = data.elem.title
            })
            //监听提交
        });
    </script>
</body>

</html>
